<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="content">
          <div class="title">
            <div style="margin-left: 15px;float:left;margin-top: 8px;margin-bottom: 6px"><img style="align-content: center" src="../assets/stu/ico_password_hover.png" height="32" width="32"/></div>
            <div style="float: left;vertical-align: middle;line-height: 50px;margin-left: 10px;color: #499aff">修改密码</div>
          </div>
          <el-card>
            <el-row>
              <el-col :span="9">
                <div class="left-text ma">旧密码:</div>
              </el-col>

              <el-col :span="15">
                <div class='ma' style="float: left">
                  <el-input v-model="form.oldpwd" type="password" style="width: 200px"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <div class="left-text ma">新密码:</div>
              </el-col>

              <el-col :span="15">
                <div class='ma' style="float: left">
                  <el-input v-model="form.newpwd" type="password" style="width: 200px"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <div class="left-text ma">确认新密码:</div>
              </el-col>

              <el-col :span="15">
                <div class='ma' style="float: left">
                  <el-input v-model="form.newpwd2" type="password" style="width: 200px"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-button type="primary" @click="updatePassword" style="float:right; margin-right: 430px; margin-bottom: 20px">确 定</el-button>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {modifyPwd} from '@/api/api'
  export default {
    data () {
      return {
        form: {
          oldpwd: '123456',
          newpwd: '',
          newpwd2: ''
        }
      }
    },
    methods: {
      updatePassword () {
        if (this.form.newpwd !== this.form.newpwd2) {
          this.$message({
            type: 'error',
            message: '两次密码不一样'
          })
        } else {
          try {
            modifyPwd(this.form).then((res) => {
              this.$router.push({path: '/platform/myTask'})  // TODO: 这里看下根据进度跳转z
              this.$message({
                type: 'success',
                message: '提交成功'
              })
            })
          } catch (err) {
            console.log('获取数据失败', err)
          }
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .content {
    /*border: solid 1px #dddddd;*/
    border-top: solid #499aff;
    margin-top: 20px;
    min-height: 600px;
    .title {
      height: 50px;
      color: #499aff;
      border: solid 1px #dddddd;
    }
    /*.el-form {*/
      /*padding-top: 20px;*/
      /*padding-left: 50px;*/
      /*padding-right: 50px;*/
      /*border-top: solid 1px #dddddd;*/
      /*text-align: center;*/
    /*}*/
    .el-button {
      float: right;
      margin-right: 50px;
    }
  }
  .left-text {
    float: right;
    margin-right: 10px;
  }
  .el-card {
    .el-row {
      .el-col {
        .ma {
          margin: 10px;
        }
        div {
          line-height: 40px;
          vertical-align: middle;
        }
      }
    }
  }
</style>
